import { NavLink, Outlet } from 'react-router-dom';

export default function ProviderLayout() {
  return (
    <div className="flex min-h-full flex-col">
      <div className="mx-auto w-full max-w-screen-md">
        <div className="rounded-2xl bg-white p-4 shadow-sm mb-3 flex items-center justify-between">
          <div>
            <div className="text-base font-semibold">医护工作台</div>
            <div className="text-xs text-gray-500">预约 · 问诊 · 开方</div>
          </div>
          <NavLink to="/" className="text-sm text-brand-600">返回用户端</NavLink>
        </div>
        <div className="grid grid-cols-3 gap-2 text-sm mb-3">
          <TopTab to="." label="概览" />
          <TopTab to="appointments" label="预约管理" />
          <TopTab to="consults" label="问诊收件箱" />
        </div>
      </div>
      <main className="mx-auto w-full max-w-screen-md flex-1">
        <Outlet />
      </main>
      <div className="safe-area fixed inset-x-0 bottom-0 z-10 bg-white/90 backdrop-blur border-t">
        <div className="mx-auto max-w-screen-md grid grid-cols-3 text-xs">
          <BottomTab to="." label="概览" icon="📊" />
          <BottomTab to="consults" label="问诊" icon="💬" />
          <BottomTab to="prescribe" label="开方" icon="📝" />
        </div>
      </div>
    </div>
  );
}

function TopTab({ to, label }: { to: string; label: string }) {
  return (
    <NavLink end to={to} className={({ isActive }) => `rounded-xl px-3 py-2 text-center ${isActive ? 'bg-brand-50 text-brand-700' : 'bg-white border'}`}>{label}</NavLink>
  );
}

function BottomTab({ to, label, icon }: { to: string; label: string; icon: string }) {
  return (
    <NavLink
      to={to}
      className={({ isActive }) =>
        `flex flex-col items-center justify-center py-2 ${isActive ? 'text-brand-600' : 'text-gray-500'}`
      }
      end={to === '.'}
    >
      <span className="text-lg leading-none">{icon}</span>
      <span className="mt-0.5">{label}</span>
    </NavLink>
  );
}


